<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>纯CSS3实现人物跑步动画DEMO演示</title>
        <style>
            body,
            html {
                background-color: #1d1f20;
                color: #ffffff;
            }
            .moon {
                position: absolute;
                top: 0;
                right: 0;
            }
            .container {
                height: 300px;
                width: 300px;
                margin: 50px;
            }
            .person {
                position: absolute;
                height: 75px;
                width: 0;
                color: #fff;
                left: 150px;
                top: 159px;
                transform-origin: 50% 50% 0px;
                -webkit-animation: sprint 3s infinite ease-in;
            }

            .person .head:before {
                content: "";
                position: absolute;
                top: 0px;
                left: -6px;
                height: 2.7px;
                width: 42px;
                border-radius: 20%;
                border: 4px solid white;
                background-color: #fff;
                transform-origin: 50% 100% 0px;
                z-index: 90;
            }

            .person .head {
                position: absolute;
                top: -30px;
                left: -6px;
                height: 30px;
                width: 30px;
                border-radius: 50%;
                border: 4px solid white;
                transform-origin: 50% 100% 0px;
                z-index: 90;
            }
            .person .head:after {
                content: "";
                position: absolute;
                top: -12px;
                left: 9px;
                height: 12px;
                width: 15px;
                border-radius: 30%;
                border: 4px solid white;
                background-color: #fff;
                z-index: 90;
            }
            .person .torso {
                position: absolute;
                height: 60px;
                width: 0;
                border-left: 2px solid white;
                left: 0px;
                top: 15px;
                z-index: 90;
            }
            .person .part {
                position: absolute;
                left: 0;
                top: 75px;
                z-index: 90;
            }
            .person .part.arm {
                position: absolute;
                border-left: 3px solid white;
                border-bottom: 3px solid white;
                height: 45px;
                width: 39px;
                top: 15px;
                right: 900px;
                transform-origin: 0% 0% 0px;
                -webkit-animation: pump 1s infinite ease-in-out;
            }
            .person .part.arm.one {
                transform: rotate3d(0, 0, 1, -90deg);
            }
            .person .part.arm.two {
                transform: rotate3d(0, 0, 1, -90deg);
                animation-delay: .5s;
            }
            .person .part.leg {
                height: 57px;
                width: 60px;
                border-right: 3px solid white;
                border-top: 3px solid white;
                -webkit-animation: run 1s infinite ease-in;
                transform-origin: 0% 0% 0px;
            }
            .person .part.leg.one {
                transform: rotate3d(0, 0, 1, 90deg);
            }
            .person .part.leg.two {
                transform: rotate3d(0, 0, 1, 80deg);
                animation-delay: .5s;
            }
            .person .part .foot {
                position: absolute;
                top: 90px;
                left: 0;
                width: 3px;
                height: 3px;
                background-color: #ffffff;
                z-index: 900;
                border: 3px solid red;
            }
            @keyframes run {
                0% {
                    transform: rotate3d(0, 0, 1, -5deg);
                }

                50% {
                    transform: rotate3d(0, 0, 1, 150deg);
                }

                100% {
                    transform: rotate3d(0, 0, 1, -5deg);
                }
            }

            @keyframes bob {
                0% {
                    transform: rotate3d(0, 0, 1, 5deg);
                }

                25% {
                    transform: rotate3d(0, 0, 1, -30deg) skew(15deg, 0deg);
                }

                50% {
                    transform: rotate3d(0, 0, 1, 5deg);
                }

                75% {
                    transform: rotate3d(0, 0, 1, -30deg) skew(15deg, 0deg);
                }

                100% {
                    transform: rotate3d(0, 0, 1, 20deg) skew(-15deg, 0deg);
                }
            }

            @keyframes pump {
                0% {
                    transform: rotate3d(0, 0, 1, 80deg);
                }

                50% {
                    transform: rotate3d(0, 0, 1, -70deg);
                }

                100% {
                    transform: rotate3d(0, 0, 1, 80deg);
                }
            }

            @keyframes spin {
                0% {
                    transform: rotate3d(0, 0, 1, -180deg);
                }

                25% {
                    transform: rotate3d(0, 0, 1, -100deg);
                }

                75% {
                    transform: rotate3d(0, 0, 1, 100deg);
                }

                100% {
                    transform: rotate3d(0, 0, 1, 180deg);
                }
            }

            @keyframes sprint {
                0% {
                    transform-origin: 50% 50% 0px;
                    transform: translate(-500px, 0px);
                }

                100% {
                    transform: translate(0px, 0px);
                    transform-origin: 50% 50% 0px;
                    transform: translate(500px, 0px);
                }
            }
        </style>
    </head>
    <body>
        <div style="text-align:center;clear:both;">
        </div>
        <div class='moon'></div>
        <div class='container'>
            <div class='person'>
                <div class='head'></div>
                <div class='part arm one'></div>
                <div class='part arm two'></div>
                <div class='torso'></div>
                <div class='part leg one'></div>
                <div class='part foot one'></div>
                <div class='part leg two'></div>
                <div class='part foot two'></div>
				
            </div>
        </div>

    </body>

</html>
